在昨天小小的 Review 過後
今天我們正式進入到功能

首先我們先看到「Blog」頁面

Blog

Blog 分為「文章總覽頁」和「文章內頁」
我們今天先來看到文章列表頁

程式碼如下

import { useApp } from 'lodestar-app-element/src/contexts/AppContext'
import React from 'react'
import { useIntl } from 'react-intl'
import { Link } from 'react-router-dom'
import styled, { css } from 'styled-components'
import { messages, StyledTitle } from '../components/blog'
import FeaturingPostPreview from '../components/blog/FeaturingPostItem'
import PostItemCollection from '../components/blog/PostItemCollection'
import { PopularPostCollection } from '../components/blog/PostLinkCollection'
import DefaultLayout from '../components/layout/DefaultLayout'
import { desktopViewMixin } from '../helpers'
import { usePostPreviewCollection } from '../hooks/blog'
import ForbiddenPage from './ForbiddenPage'

const PopularPostsBlock = styled.div`
  ${desktopViewMixin(css`
    order: 1;
  `)}
`

const BlogPage: React.VFC = () => {
  const { formatMessage } = useIntl()
  const app = useApp()

  const { posts } = usePostPreviewCollection()
  const latestPosts = posts.slice(0, 3)

  if (!app.loading && !app.enabledModules.blog) {
    return <ForbiddenPage />
  }

  return (
    <DefaultLayout white>
      <div className="container py-5">
        <div className="row mb-4">
          <div className="col-12 col-lg-8">
            {latestPosts[0] && (
              <Link to={`/posts/${latestPosts[0].codeName || latestPosts[0].id}`}>
                <FeaturingPostPreview {...latestPosts[0]} variant="headline" />
              </Link>
            )}
          </div>
          <div className="col-12 col-lg-4 d-flex flex-column justify-content-between">
            {latestPosts[1] && (
              <Link to={`/posts/${latestPosts[1].codeName || latestPosts[1].id}`}>
                <FeaturingPostPreview {...latestPosts[1]} variant="featuring" />
              </Link>
            )}
            {latestPosts[2] && (
              <Link to={`/posts/${latestPosts[2].codeName || latestPosts[2].id}`}>
                <FeaturingPostPreview {...latestPosts[2]} variant="featuring" />
              </Link>
            )}
          </div>
        </div>

        <div className="row">
          <PopularPostsBlock className="col-12 col-lg-3 pl-4 mb-4">
            <PopularPostCollection />
          </PopularPostsBlock>

          <div className="col-12 col-lg-9">
            <StyledTitle>{formatMessage(messages.latest)}</StyledTitle>
            <PostItemCollection posts={posts.slice(3)} withTagSelector />
          </div>
        </div>
      </div>
    </DefaultLayout>
  )
}

export default BlogPage

在文章列表頁中，整個配置非常簡單
使用 Bootstrap 進行頁面的排版
最外圍會包一個「DefaultLayout」
在前台的頁面，基本都會包上這個元件
在這邊僅傳入「white」這個 property，讓背景為白色

最上方會顯示最新的三篇文章
包含它的封面圖片、標題、作者和發布時間
這邊把使用的是「FeaturingPostPreview」這個封裝好的元件

下方則是「文章列表」和「熱門文章」
也分別抽成「PostItemCollection」和「PopularPostCollection」
「PostItemCollection」中還包含了篩選分類

我非常喜歡這邊的架構
這邊的架構雖然簡單，但卻充分展現
如果元件劃分的很好的話，很容易讓人了解每個元件他的功能
倘若發生錯誤或問題時，能夠快速定位到對應的元件

明天我們再來看文章的內頁